<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
        <el-form-item label="待反馈日期">
            <el-date-picker  size="small"
                v-model="queryParams.todoFeedbackDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="防控标题">
            <el-input v-model="queryParams.title" clearable size="small"></el-input>
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="queryParams.status" clearable  size="small">
                <el-option label="启用" value="1"></el-option>
                <el-option label="停用" value="0"></el-option>
            </el-select>
        </el-form-item>
        
        
        
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button  icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
  
      
      <el-table v-loading="loading" :data="configList" row-key="id" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="防控标题" align="center" prop="title" :show-overflow-tooltip="true"/>
        <el-table-column label="班级名称" align="center" prop="className" :show-overflow-tooltip="true" >
        </el-table-column>
        <el-table-column label="班主任名称" align="center" prop="teacherId" :show-overflow-tooltip="true" >
            
        </el-table-column>
        <el-table-column label="是否已反馈" align="center" prop="isFeedback" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
                <el-tag v-if="scope.row.isFeedback=='1'" >已反馈</el-tag>
                <el-tag v-if="scope.row.isFeedback=='0' || !scope.row.isFeedback" type="info">未反馈</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="待反馈日期" align="center" prop="todoFeedbackDate" :show-overflow-tooltip="true" >
        </el-table-column>
        <el-table-column label="实际反馈时间" align="center" prop="feedbackTime" :show-overflow-tooltip="true" >
        </el-table-column>
        <el-table-column label="状态" align="center" width="150" prop="status" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status=='1'" >有效</el-tag>
                <el-tag v-if="scope.row.status=='0'" type="info">无效</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80" >
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="反馈" placement="top" v-if="scope.row.isFeedback!='1'">
                    <el-button size="mini" circle type="success" icon="el-icon-finished" @click="handleEdit(scope.row)" />
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="查看" placement="top" v-if="scope.row.isFeedback=='1'">
                    <el-button size="mini" circle  icon="el-icon-view" @click="handleEdit(scope.row)" />
                  </el-tooltip>
                </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <el-dialog title="编辑防疫任务" :visible.sync="open" width="70%" :before-close="handleClose">
        <el-table v-loading="loading" :data="studentList" >
            <el-table-column label="序号" align="center" type="index"/>
            <el-table-column label="学生姓名" align="center" prop="name" :show-overflow-tooltip="true"/>
            <el-table-column label="手机号" align="center" prop="phone" :show-overflow-tooltip="true"/>
            <el-table-column label="是否提交" align="center" prop="feedbackTime" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.feedbackTime" type="success">已提交</el-tag>
                <el-tag v-else type="info">未提交</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="监护人" align="center" prop="guardianName" :show-overflow-tooltip="true"/>
            <el-table-column label="监护人关系" align="center" prop="relationOfGuardian" :show-overflow-tooltip="true"/>
            <el-table-column label="监护人手机号" align="center" prop="guardianPhoneNumber" :show-overflow-tooltip="true"/>
            <el-table-column label="健康码" align="center" prop="healthCodeImages" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <el-upload
                        :disabled="formData.isFeedback==1"
                        class="avatar-uploader"
                        :action="upload.url"
                        :headers="headers"
                        :show-file-list="false"
                        :on-success="((val)=>{handleAvatarSuccess(val,scope.$index)})"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="scope.row.healthCodeImages" :src="upload.showUrl+scope.row.healthCodeImages" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.remarks" placeholder="填写备注" :disabled="formData.isFeedback==1"></el-input>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer" v-if="formData.isFeedback!=1">
          <el-button type="primary" @click="submitEpidemic">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      
    </div>
  </template>
  
  <script>
  import { listTermtime } from "@/api/system/termtime.js";
  import { scopePageList, updateScope,listFeedBack} from "@/api/workflow/todo";
  import { getToken } from "@/utils/auth";
  
  export default {
    name: "Config",
    data() {
      
      return {
        expireTimeOPtion: {
          disabledDate(time) {
            return time.getTime() <= Date.now() - 1 * 24 * 3600 * 1000 //如果没有后面的-8.64e7就是不可以选择今天的
          },
        },
        upload:{
            url: process.env.VUE_APP_BASE_API + "/test/uploadImage",
            showUrl:process.env.VUE_APP_BASE_API + "/school/file/"
        },
        open:false,
        // 遮罩层
        loading: true,
        multiple:true,
        // 选中数组
        ids: [],
        // 总条数
        total: 0,
        // 参数表格数据
        configList: [],
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          noticeType:0
        },
        isAddMonthPlan:false,

        consultMajorList:[],
        formData:{
        },
        studentList:[]
      };
    },
    computed: {
        headers() {
        return {
            'Authorization': getToken()
        }
        }
    },
    created() {
      this.getList();
    },
    methods: {

      handleReset(){
        this.queryParams={
          pageNum: 1,
          pageSize: 10,
          noticeType:0
        }
        this.getList();
      },
      /** 查询参数列表 */
      getList() {
        this.loading = true;
        scopePageList(this.queryParams).then(response => {
            this.configList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleClose(){
        this.$confirm('确认关闭？').then(_ => {
            this.open = false
        })
          //关闭窗口
          
      },
      handleAdd(){
        this.resetFormData()
        this.open = true


      },
      handleUpdate(row){
          
      },
      handleEdit(row){
        this.open = true
        this.formData = row
        listFeedBack({scopeId:row.id}).then(resp=>{
          this.studentList = resp.data
        })
        // this.studentList=[{
        //     name:'张三',
        //     phone:'15699966666',
        //     guardianName:'张一 ',
        //     relationOfGuardian:'父亲',
        //     guardianPhoneNumber:'13699555445',
        //     healthCodeImages:''
        // }]

      },
      handleDelete(row){
          //删除
          const _this = this
           this.$confirm('是否确认删除吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            deleteNoticeSchool({id:row.id}).then(resp=>{
              if(resp.code==200){
                  _this.msgSuccess("删除成功");
                  _this.handleQuery()
              }
          })
          })
          
      },
      resetFormData(){
          this.formData={
            title:null,
            type:null,
            beginDate:null,
            beginDate:null,
            scope:null,
            classId:null,
            gradeId:null,
            descContent:null
          }
          this.resetForm("formData");
      },
      handleSelectionChange(selection){

      },
      submitEpidemic(){
        console.log(this.studentList)
        for(let i=0;i<this.studentList.length;i++){
            if(!this.studentList[i].healthCodeImages && !this.studentList[i].remarks){
                this.$message({ message: '第'+(i+1)+'行'+this.studentList[i].name + '的健康码和备注都为空，请至少填写一项。' , type: 'warning' });
                return
            }
        }
        //提交防控内容
        this.formData.feedBacks = this.studentList
        this.formData.isFeedback=1
        updateScope(this.formData).then(resp=>{
          this.msgSuccess("提交成功");
          this.handleQuery()
          this.open = false
        })
      },
      cancel(){
        this.open = false
      },
      handleAvatarSuccess(res, index){
        console.log(res,index)
        this.studentList[index].healthCodeImages=res.result
        this.$nextTick(()=>{
            })
            this.$forceUpdate()
      },
      beforeAvatarUpload(file){
        const isJPG = file.type === 'image/jpeg';
        const isPng = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG&&!isPng) {
          this.$message.error('上传图片要求是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return (isJPG || isPng) && isLt2M;
      }
    }
  };
  </script>
  
<style scoped lang="scss">
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 22px;
    color: #8c939d;
    width: 100px;
    height: 40x;
    line-height: 40px;
    text-align: center;
  }
  .avatar {
    width: 40px;
    height: 40px;
    display: block;
  }
//   .modelDiv{
//     border: 1px solid rgb(112, 111, 111);
//     margin: 0 auto; 
//     border-radius: 5px;
    
//   } 
//   /deep/ .el-dialog__body{
//     padding: 5px 0px
//   }
</style>